<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../js/vue.js"></script>
</head>

<body>
<div id="app">
    <input-number v-model="value" :max=10 :min="0" @on-change="change" :step="cstep"></input-number>
</div>
</body>

<script>
    Vue.component('input-number', {
        template: '<div class="input-number">\
                       <input type="text" :value="currentValue" @change="handleChange"/>\
                       <button @click="handleDown">-</button>\
                       <button @click="handleUp">+</button>\
                   </div>',
        props: {
            max: {
                type: Number,
                default: Infinity
            },
            min: {
                type: Number,
                default: -Infinity
            },
            value: {
                type: Number,
                default: 0
            },
            step: {
                type: Number,
                default: 1
            }
        },
        data: function () {
            console.info('data');
            return {
                currentValue: this.value
            };
        },
        watch: {
            currentValue: function (val) {
                this.$emit('input', val);
                this.$emit('on-change', val);
            },
            value: function (val) {
                this.updateValue(val);
            }
        },
        methods: {
            updateValue: function (val) {
                if (val > this.max) {
                    val = this.max;
                }
                if (val < this.min) {
                    val = this.min;
                }
                this.currentValue = val;
            },
            handleChange: function (event) {
                let val = event.target.value;
                if (/^-?\d+$/.test(val)) {
                    val = Number(val);
                    this.currentValue = val;
                    if (val >= this.max) {
                        this.currentValue = this.max;
                    }
                    if (val <= this.min) {
                        this.currentValue = this.min;
                    }
                } else {
                    event.target.value = this.currentValue;
                }
            },
            handleDown: function () {
                if (this.currentValue <= this.min) return;
                this.currentValue -= this.step;
            },
            handleUp: function () {
                if (this.currentValue >= this.max) return;
                this.currentValue += this.step;
            }
        },
        mounted: function () {
            console.info('mounted');
            this.updateValue(this.value);
        }
    });

    new Vue({
        el: '#app',
        data: {
            value: 5,
            cstep:2
        },
        methods: {
            change: function (val) {
                console.log(val);
            }
        }
    })
</script>
</html>
